<template>
  <div class="category-con mt5 table-gl-w">
    <TableWrap style="flex: 1" @refresh="getList(props.shopId)">
      <template #headerLeft>
        <a-space>
          <a-button class="gray-outline" @click="show('add')">新增分类</a-button>
          <a-button class="gray-outline" @click="showCategorySortModal = true">设置排序</a-button>
        </a-space>
      </template>
      <template #tableBody>
        <a-table :data="tableData" hide-expand-button-on-empty row-key="id" size="mini" class="table-single-line" :loading="loading" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
          <template #columns>
            <a-table-column title="图片" #cell="{ record }" :width="80">
              <ImgPopover :src="$extract(record, 'dataFromRestApi.image.src')">
                <template #con>
                  <a-image :preview="false" width="40" height="40" fit="contain" :src="$extract(record, 'dataFromRestApi.image.src')" />
                </template>
              </ImgPopover>
            </a-table-column>
            <a-table-column title="名称" #cell="{ record }" :width="120">
              {{ $extract(record, 'dataFromRestApi.name') }}
              <!-- <TextLimit position="top" :val="$extract(record, 'dataFromRestApi.name')"></TextLimit> -->
            </a-table-column>
            <a-table-column title="别名" #cell="{ record }" :width="120">
              {{ $extract(record, 'dataFromRestApi.slug') }}
              <!-- <TextLimit position="top" :val="$extract(record, 'dataFromRestApi.slug')"></TextLimit> -->
            </a-table-column>
            <a-table-column title="描述" #cell="{ record }" :width="120">
              {{ $extract(record, 'dataFromRestApi.description') }}
              <!-- <TextLimit position="top" :val="$extract(record, 'dataFromRestApi.description')"></TextLimit> -->
            </a-table-column>
            <a-table-column title="商品总数" #cell="{ record }" :width="60">
              {{ $extract(record, 'dataFromRestApi.count') }}
            </a-table-column>
            <a-table-column title="排序" #cell="{ record }" :width="80">
              {{ $extract(record, 'dataFromRestApi.menu_order') }}
            </a-table-column>
            <a-table-column title="映射ERP类目" #cell="{ record }" :width="80">
              {{ $extract(record, 'productCategory.name') }}
              <!-- <TextLimit position="top" :val="$extract(record, 'prop.name')"></TextLimit> -->
            </a-table-column>
            <a-table-column title="操作" #cell="{ record }" :width="40">
              <a-space>
                <a-button type="text" @click="show('edit', record)">编辑</a-button>
                <a-button type="text" @click="del(record)" style="color: red">删除</a-button>
              </a-space>
            </a-table-column>
          </template>
        </a-table>
      </template>
    </TableWrap>
  </div>
  <categoryDetail :shopId="props.shopId" :treeData="tableData" v-if="showCategoryDetailModal" v-model="showCategoryDetailModal" :type="type" :info="info" @save="getList()" />
  <categorySort :shopId="props.shopId" :treeData="tableData" v-if="showCategorySortModal" v-model="showCategorySortModal" @save="getList()" />
</template>

<script lang="ts" setup>
  import { watch, ref } from 'vue'
  import { Modal, Message } from '@arco-design/web-vue'
  import { listAllCategoryTreeByShopId, batchCategory } from '@/api/product'
  import TableWrap from '@/components/TableWrap.vue'
  import categoryDetail from './categoryDetail.vue'
  import categorySort from './categorySort.vue'
  import { onMounted } from 'vue'
  const props = defineProps(['shopId'])
  let tableData = ref([{}])
  let expandedKeys = ref([])
  let loading = ref(false)
  let showCategoryDetailModal = ref(false)
  let showCategorySortModal = ref(false)
  let type = ref('add')
  let info = ref({})
  // 显示弹框
  const show = (showType: string, data?: any) => {
    type.value = showType
    info.value = data
    showCategoryDetailModal.value = true
  }
  const getList = async () => {
    loading.value = true
    const res: any = await listAllCategoryTreeByShopId({ shopId: props.shopId })
    tableData.value = res.data || []
    loading.value = false
  }

  const del = (data: any) => {
    Modal.error({
      title: '删除',
      content: '请再次确认是否要删除类目',
      titleAlign: 'start',
      cancelText: '取消',
      hideCancel: false,
      onOk: async () => {
        let params = {
          param: {
            delete: [data.dataFromRestApi.id],
          },
          shopId: props.shopId,
        }
        const res: any = await batchCategory(params)
        if (res.code == 'SUCCESS') {
          Message.success('删除成功。当前操作不是立即生效，请等待几分钟后刷新页面')
          getList()
        }
      },
    })
  }

  watch(
    () => props.shopId,
    (val) => {
      getList()
    }
  )

  onMounted(() => {
    if (props.shopId) getList()
  })
  defineExpose({ getList })
</script>

<style lang="less" scoped>
  .category-con {
    height: calc(100vh - @menuAndTabHeight - 92px);
  }
</style>
